<template>
	<div>

		<!-- 选择规格 -->
		<el-card class="sku-select-card" v-if="!isUpdate">
			<div slot="header" class="header">
				<span>选择商品属性</span>
				<el-select class="sku-select" v-model="selectedAttrs" value-key="name" multiple filterable allow-create
				 :multiple-limit="3" default-first-option placeholder="选择或输入该商品包含的属性" @change="attrKeyChange">
					<el-option v-for="(item, index) in attrKeys" :key="index" :label="item.name" :value="item"></el-option>
				</el-select>
			</div>
			<!-- 给属性赋值 -->
			<el-card style="margin-top: 10px;" v-for="(item, index) in skus" :key="index">
				<div class="header">
					<span>{{item.name}}</span>
					<el-select class="sku-select" v-model="selectedValues[index]" value-key="name" multiple filterable allow-create
					 :multiple-limit="5" default-first-option placeholder="选择或输入该属性对应的值" no-data-text="请补充属性值" @change="attrValueChange($event, item.name, index)">
						<el-option v-for="(value, valIndex) in item.values" :key="valIndex" :label="value.name" :value="{name: value.name, attrKey: item.name}"></el-option>
					</el-select>
				</div>
			</el-card>
		</el-card>

		<!-- 分割线 -->
		<el-divider v-if="!isUpdate && skuItems.length > 0"></el-divider>

		<!-- 配置规格 -->
		<el-card v-if="skuItems.length > 0">
			<span slot="header">配置商品规格</span>
			<el-table :data="skuItems">
				<el-table-column label="规格名称" prop="name"></el-table-column>
				<el-table-column label="轮播图组" align="center">
					<template slot-scope="scope">
						<el-select v-model="scope.row.bannersId" placeholder="选择轮播图组">
							<el-option v-for="(item, index) in bannerGroups" :key="index" :label="item.name" :value="index"></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="库存量" align="center">
					<template slot-scope="scope">
						<el-input v-model="scope.row.stock" placeholder="输入库存量" type="number" @mousewheel.native.prevent></el-input>
					</template>
				</el-table-column>
				<el-table-column label="现售价" align="center">
					<template slot-scope="scope">
						<el-input v-model="scope.row.price" placeholder="输入现售价" type="number" @mousewheel.native.prevent></el-input>
					</template>
				</el-table-column>
				<el-table-column label="原售价" align="center">
					<template slot-scope="scope">
						<el-input v-model="scope.row.originalPrice" placeholder="输入原售价" type="number" @mousewheel.native.prevent></el-input>
					</template>
				</el-table-column>
				<el-table-column label="成本价" align="center">
					<template slot-scope="scope">
						<el-input v-model="scope.row.costPrice" placeholder="输入成本价" type="number" @mousewheel.native.prevent></el-input>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

	</div>
</template>

<script>
	export default {
		inject: ['bannerGroups'],
		props: {
			goodsSkus: Array
		},
		watch: {
			goodsSkus(e) {
				this.isUpdate = true;
				this.skuItems = e.map(e => {
					e.bannersId = this.bannerGroups.findIndex(b => b.id == e.bannersId);
					return e;
				});
			}
		},
		data() {
			return {
				attrKeys: [],
				selectedAttrs: [],
				selectedValues: [],
				skus: [],
				skuItems: [],
				isUpdate: false
			}
		},
		created() {
			this.findAttrs();
		},
		methods: {
			findAttrs() {
				this.$util.request('/sku/findAttrs', {}, (res) => {
					this.attrKeys = res;
				}, true);
			},
			attrKeyChange(e) {
				this.skus = e.map(e => {
					if (typeof e == 'string') {
						return {
							name: e,
							values: []
						}
					}
					return e;
				});

				this.getSkuItems();
			},
			attrValueChange(e, key, index) {
				this.skus[index].selectedValues = e.map(e => {
					if (typeof e == 'string') {
						return {
							name: e,
							attrKey: key
						}
					}
					return e;
				});

				this.getSkuItems();
			},
			getSkuItems() {
				const result = [];
				const generateItems = (skuArr, i, list) => {
					for (let j = 0; j < list[i].length; j++) {
						if (i < list.length - 1) {
							skuArr[i] = list[i][j];
							generateItems(skuArr, i + 1, list);
						} else {
							result.push([...skuArr, list[i][j]]);
						}
					}
				}

				const values = this.skus.map(e => e.selectedValues || []);
				if (values.length > 0) {
					generateItems([], 0, values);
					if (result.length > 0) {
						this.skuItems = result.map(e => {
							const attrs = [];
							let names = [];
							e.forEach(e => {
								names.push(e.name);
								attrs.push({
									key: e.attrKey,
									value: e.name
								});
							});
							return {
								name: names.join(' '),
								goodsAttr: attrs
							};
						});
					}
				}
			},
			returnValue() {
				if (this.skuItems.length == 0) return this.$util.msg('请至少配置一种规格');
				const rules = {
					bannersId: '选择轮播图组',
					stock: '输入库存量',
					price: '输入现售价'
				};
				for (let item of this.skuItems) {
					for (let key in rules) {
						if (item[key] == undefined || item[key].length == 0) {
							return this.$util.msg(`请在规格【${item.name}】中${rules[key]}`);
						}
					}
					if (item.originalPrice && item.originalPrice <= 0) return this.$util.msg(`【${item.name}】中的原售价必须大于0`);
					if (item.costPrice && item.costPrice <= 0) return this.$util.msg(`【${item.name}】中的成本价必须大于0`);
				}

				return this.skuItems;
			}
		}
	}
</script>

<style lang="scss">
	.sku-select-card {

		.header {
			@extend %flex-align-center;

			.sku-select {
				flex: 1;
				margin-left: 20px;
			}
		}
	}
</style>
